<template>
  <view class="broad-content">
    <view class="broad-Item" v-for="(item, index) in list" :key="index">
      <view class="item-left" v-if="item.status == 1">
        <view>开始时间：{{ item.startTime }}</view></view
      >
      <view class="item-left" v-if="item.status == 2"
        ><view class="title">{{ item.title }}</view>
        <view>{{ item.startTime }}</view></view
      >
      <view class="item-right">
        <view
          class="broad"
          :style="{ backgroundColor: item.status == 1 ? '#f00' : '#0f0' }"
          >{{ item.status == 1 ? "未开始" : "直播中" }}</view
        >
        <view class="lookInfo" @tap="goBroadInfo(item)">查看详情</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "帕拉梅锻炼",
          startTime: "2022-12-25 00-00-00",
          status: "1",
        },
        {
          title: "帕拉梅锻炼",
          startTime: "2022-12-25 00-00-00",
          status: "2",
        },
        {
          title: "帕拉梅锻炼",
          startTime: "2022-12-25 00-00-00",
          status: "2",
        },
      ],
    };
  },
  methods: {
    goBroadInfo(item) {
      console.log(item);
      uni.navigateTo({
        url: "/pages/broad/broad",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.broad-content {
  //   padding: 20rpx;
  .broad-Item {
    display: flex;
    height: 150rpx;
    justify-content: space-between;
    margin-bottom: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .item-left {
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      .title {
        font-size: 40rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
    }
    .item-right {
      padding-bottom: 10rpx;
      padding-right: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .broad {
        // width: 100rpx;
        background-color: #f00;
        padding: 10rpx 20rpx;
        border-radius: 20rpx 0 0 0;
        color: #fff;
        text-align: center;
      }
      .lookInfo {
        color: blue;
      }
    }
  }
}
</style>